.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); display: flex; justify-content: center; align-items: center; z-index: 1000; }
.modal-content { background-color: white; border-radius: 8px; box-shadow: 0 5px 15px rgba(0,0,0,0.3); width: 600px; max-width: 90%; color: #333; }
.modal-header { display: flex; justify-content: space-between; align-items: center; padding: 16px 24px; border-bottom: 1px solid #e9ecef; }
.modal-header h3 { margin: 0; font-size: 1.25rem; font-weight: 600; }
.close-btn { background: none; border: none; font-size: 2rem; line-height: 1; cursor: pointer; color: #6c757d; }
.modal-body { padding: 32px; }
.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.detail-item { display: flex; flex-direction: column; }
.detail-item.full-width { grid-column: 1 / -1; }
.label { font-size: 0.9rem; color: #6c757d; margin-bottom: 8px; }
.value { font-size: 1.1rem; font-weight: 500; color: #212529; }
.description { line-height: 1.7; }
.status-badge { display: inline-block; align-self: flex-start; padding: 4px 12px; border-radius: 15px; color: #fff; font-size: 1rem; font-weight: 500; }
.status-待处理 { background-color: #dc3545; }
.status-处理中 { background-color: #ffc107; color: #212529; }
.status-已解决 { background-color: #198754; }
.modal-footer { padding: 16px 24px; text-align: right; border-top: 1px solid #e9ecef; }
.btn-primary { background-color: #0d6efd; color: white; padding: 10px 20px; border-radius: 6px; border: none; font-size: 0.95rem; font-weight: 500; cursor: pointer; }
/* 状态徽章样式 */
.status-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 500;
  text-align: center;
}

/* 状态颜色定义 */
.status-pending {
  background-color: #ffc107;
  color: #333;
}

.status-processing {
  background-color: #007bff;
  color: white;
}

.status-resolved {
  background-color: #28a745;
  color: white;
}

.status-unknown {
  background-color: #6c757d;
  color: white;
}

/* 详情网格样式 */
.detail-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
}

.detail-item {
  padding: 10px;
  border: 1px solid #e9ecef;
  border-radius: 4px;
}

.detail-item .label {
  font-weight: bold;
  margin-right: 8px;
  color: #495057;
}

.detail-item .value {
  color: #333;
}

.full-width {
  grid-column: 1 / 3;
}

.description {
  white-space: pre-wrap;
  word-break: break-word;
}
